<template>
	<view class="">
		<cu-custom bgColor="bg-gradual-blue">
			<block slot="content">
				<text style="margin-right:20rpx;">防控疫情</text>
				<text>人人有责</text>
			</block>
		</cu-custom>
		<view class="heightbox"></view>
		<view class="info_box">
			<view class="form-box">
				<view class="info_head">新冠状病毒疫情控制离不开您的支持</view>

				<form @submit="formSubmit" @reset="formReset">
					<view class="uni-form-item uni-column">
						<view class="form-title">企业(单位)名称：</view>
						<input class="uni-input" name="input" v-model="form.enterpriseName" disabled />
					</view>
					<view class="uni-form-item uni-column">
						<view class="form-title">姓名：</view>
						<input class="uni-input" name="input" v-model="form.name" disabled/>
					</view>
					<view class="uni-form-item uni-column">
						<view class="form-title">年龄：</view>
						<input class="uni-input" name="input" v-model="form.age" disabled/>
					</view>
					<view class="uni-form-item uni-column">
						<view class="form-title">性别：</view>
						<evan-radio-group @change="onGroupChange" v-model="color2" style="margin-top: 16rpx;">
							<view @click="sexRadioClick(index)" class="evan-radio-show__list-item" v-for="(item,index) in colorList" :key="item.value">
								<text class="evan-radio-show__list-item__label">{{item.label}}</text>
								<evan-radio ref="sexRadio" :preventClick="true" :label="item.value" disabled>
									<template slot="icon">
										<view>
											<uni-icons v-if="color2===item.value" type="checkmarkempty" size="30" color="#5064eb" ></uni-icons>
										</view>
									</template>
								</evan-radio>
							</view>
						</evan-radio-group>
					</view>
					<view class="uni-form-item uni-column">
						<view class="form-title">电话：</view>
						<input class="uni-input" name="input" v-model="form.phone" disabled/>
					</view>
					<view class="uni-form-item uni-column">
						<view class="form-title" style="margin-bottom: 16rpx;">住址：</view>
						<view style="display: inline-block;width: 30%;overflow: hidden; white-space:nowrap;margin-left: 20rpx;">
							<view class="tab" @tap="toggleTab('contrys1')" style="display: inline-block;width: 90%;overflow: hidden; white-space:nowrap">
								<view class="form_content" style="width: 100%;display: inline-block;text-overflow:ellipsis">
									<span style="width: 100%;">{{countyName}}</span>
								</view>
							</view>
							<text>/</text>
						</view>
						<view style="display: inline-block;width: 30%;overflow: hidden; white-space:nowrap;">
							<view class="tab" @tap="toggleTab('contrys2')" style="display: inline-block;width: 90%;overflow: hidden; white-space:nowrap">
								<view class="form_content" style="width: 100%;display: inline-block;text-overflow:ellipsis">
									<span style="width: 100%;">{{townName}}</span>
								</view>
							</view>
							<text>/</text>
						</view>
						<view style="display: inline-block;width: 30%;overflow: hidden; white-space:nowrap">
							<view class="tab" @tap="toggleTab('contrys3')" style="display: inline-block;width: 85%;overflow: hidden; white-space:nowrap">
								<view class="form_content" style="width: 100%;display: inline-block;text-overflow:ellipsis">
									<span style="width: 100%;">{{villageName}}</span>
								</view>
							</view>
						</view>
						<view style="border: 1px #eeeeee solid;width: 100%;border-bottom: none;"></view>
					</view>
					<view class="uni-form-item uni-column">
						<view class="form-title">详细住址：</view>
						<input class="uni-input" name="input" v-model="form.addrDetail"/>
					</view>
					<view class="uni-form-item uni-column">
						<view class="form-title">状态：</view>
						<view class="tab" @tap="toggleTab('selector')">
							<input class="uni-input " name="input" v-model="workName" /><text class="cuIcon-unfold icon"></text>
						</view>
					</view>
					<view class="uni-form-item uni-column">
						<view class="form-title">部门(商户)：</view>
						<input class="uni-input" name="input" v-model="form.team"/>
					</view>
					<view class="uni-form-item uni-column">
						<view class="form-title">是否有重点疫区旅居史：</view>
						<evan-radio-group @change="onGroupChange" v-model="form.liveHbFlag" style="margin-top: 16rpx;">
							<view @click="liveHbFlagRadioClick(index)" class="evan-radio-show__list-item" v-for="(item,index) in isChoose" :key="item.value">
								<text class="evan-radio-show__list-item__label">{{item.label}}</text>
								<evan-radio ref="liveHbFlagRadio" :preventClick="true" :label="item.value">
									<template slot="icon">
										<view>
											<uni-icons v-if="form.liveHbFlag===item.value" type="checkmarkempty" size="30" color="#5064eb"></uni-icons>
										</view>
									</template>
								</evan-radio>
							</view>
						</evan-radio-group>
					</view>
					<view class="uni-form-item uni-column">
						<view class="form-title">是否从怀化以外地区回来：</view>
						<evan-radio-group @change="onGroupChange" v-model="form.otherCityFlag" style="margin-top: 16rpx;">
							<view @click="otherCityFlagRadioClick(index)" class="evan-radio-show__list-item" v-for="(item,index) in isChoose" :key="item.value">
								<text class="evan-radio-show__list-item__label">{{item.label}}</text>
								<evan-radio ref="otherCityFlagRadio" :preventClick="true" :label="item.value">
									<template slot="icon">
										<view>
											<uni-icons v-if="form.otherCityFlag===item.value" type="checkmarkempty" size="30" color="#5064eb"></uni-icons>
										</view>
									</template>
								</evan-radio>
							</view>
						</evan-radio-group>
					</view>
					<view class="uni-form-item uni-column">
						<view class="form-title">是否与确诊、疑似病人有过密切接触：</view>
						<evan-radio-group @change="onGroupChange" v-model="form.patienContactFlag" style="margin-top: 16rpx;">
							<view @click="patienContactFlagRadioClick(index)" class="evan-radio-show__list-item" v-for="(item,index) in isChoose" :key="item.value">
								<text class="evan-radio-show__list-item__label">{{item.label}}</text>
								<evan-radio ref="patienContactFlagRadio" :preventClick="true" :label="item.value">
									<template slot="icon">
										<view>
											<uni-icons v-if="form.patienContactFlag===item.value" type="checkmarkempty" size="30" color="#5064eb"></uni-icons>
										</view>
									</template>
								</evan-radio>
							</view>
						</evan-radio-group>
					</view>
					<view class="uni-btn-v">
						<button form-type="submit" class="sub_button sub_one" @click="formSubmits('DialogModal1')">提交信息</button>
					</view>
				</form>
				<w-picker mode="selector" :defaultVal="workName"   @confirm="workStatusConfirm" ref="selector" themeColor="#f00" :selectList="selectList"></w-picker>
				<w-picker mode="selector" :defaultVal="countyName" @confirm="addrCountyConfirm" ref="contrys1" themeColor="#f00" :selectList="contry1Lists"></w-picker>
				<w-picker mode="selector" :defaultVal="townName"   @confirm="addrTownConfirm" ref="contrys2" themeColor="#f00" :selectList="contry2Lists"></w-picker>
				<w-picker mode="selector" :defaultVal="villageName" @confirm="addrVillageConfirm" ref="contrys3" themeColor="#f00" :selectList="contry3Lists"></w-picker>
			</view>
		</view>

		<chunLei-modal v-model="isShow" :mData="data" type="notify" @cancel="cancel" :navHeight="0" :maskEnable="false">
		</chunLei-modal>
		
		<view class="cu-modal" :class="modalName == 'DialogModal1' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-dialog-top">
					<view class="gogogo">
						加油怀化！加油中国！
					</view>
					<view class="gogogo">
						感谢您对怀化新冠状病毒
					</view>
					<view class="gogogo">
						疫情工作的支持！
					</view>
				</view>
				<view class="cu-dialog-center">
					<view class="dialog-center-msg flex justify-center align-center">
						<view class="dialog-center-msg-icon">
							<view class="msg-icon">
								<icon type="success" size="26"/>
							</view>
							<view class="msg-icon">
								信息提交成功
							</view>
						</view>
					</view>
				</view>
				<view class="cu-dialog-bottom">
					<button class="buttom-btn" @click="submit">确 定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import chunLeiModal from '@/components/chunLei-modal/chunLei-modal.vue'
	import wPicker from "@/components/w-picker/w-picker.vue";
	import EvanRadio from '@/components/radio/evan-radio/evan-radio.vue'
	import EvanRadioGroup from '@/components/radio/evan-radio/evan-radio-group.vue'
	import UniIcons from '@/components/radio/uni-icons/uni-icons.vue'
	let _this = null;
	export default {
		components: {
			wPicker,
			chunLeiModal,
			EvanRadio,
			EvanRadioGroup,
			UniIcons
		},
		data() {
			return {
				workName:'',
				countyName:'',
				townName:'',
				villageName:'',
				userInfos:"",
				modalName: null,
				color2: '1',
				colorList: [{
						label: '男',
						value: '0'
					},
					{
						label: '女',
						value: '1'
					}
				],
				isChoose: [{
						label: '是',
						value: 'Y'
					},
					{
						label: '否',
						value: 'N'
					}
				],
				isShow: false,
				data: {
					//title:'呵护未成年健康成长',
					cancelText: '确定',
					cancelColor: '#5064eb',
					content: '保存成功',
				},

				form: {
					enterpriseName: '',/* 企业(单位)名称 */
					name: '',/* 姓名 */
					age: '',/* 年龄 */
					sex: '0',/* 性别 */
					phone: '',/* 电话 */
					addrCounty: '',
					addrTown: '',
					addrVillage: '',
					addrDetail: '',/* 详细地址 */
					workStatus: '',/* 状态 */
					team: '',/* 班组 */
					liveHbFlag: 'N',/* 是否有重点疫区旅居史 */
					otherCityFlag: 'N',/* 是否从怀化以外地区回来 */
					patienContactFlag:'N',/* 是否与确诊、疑似病人密切接触 */
					createUser:'',
					updateUser:''
				},
				selectList: [{
					label: "在岗",
					value: 1
				}, {
					label: "休假",
					value: 2
				}, {
					label: "在家隔离",
					value: 3
				}, {
					label: "集中隔离",
					value: 4
				}],
				contry1Lists: [{
					label: "",
					value: 0
				}],
				contry2Lists: [{
					label: "",
					value: 0,
				}],
				contry3Lists: [{
					label: "",
					value: 0
				}]
			}
		},
		onLoad(){
			this.getaddrCounty('431200000000')
			this.getWorkList()
			this.userInfos=uni.getStorageSync("userInfo")
			console.log(this.userInfos)
			this.form=uni.getStorageSync("userInfo")
			this.workName=this.form.workStatusName
			this.countyName=this.form.addrCountyName
			this.townName=this.form.addrTownName
			this.villageName=this.form.addrVillageName
			this.getaddrTown(this.form.addrCounty) 
			this.getaddrVillage(this.form.addrTown)
			console.log(this.form.coughFlag)
			this.form.liveHbFlag==null?this.form.liveHbFlag='N':this.form.liveHbFlag,
			this.form.patienContactFlag==null?this.form.patienContactFlag='N':this.form.patienContactFlag
			this.form.otherCityFlag==null?this.form.otherCityFlag='N':this.form.otherCityFlag
		},
		methods: {
			onGroupChange(e) {
				console.log(e)
			},
			sexRadioClick(index) {
				console.log(index)
				this.$refs.sexRadio[index].select()
			},
			liveHbFlagRadioClick(index) {
				console.log(index)
				this.$refs.liveHbFlagRadio[index].select()
			},
			otherCityFlagRadioClick(index) {
				console.log(index)
				this.$refs.otherCityFlagRadio[index].select()
			},
			patienContactFlagRadioClick(index) {
				console.log(index)
				this.$refs.patienContactFlagRadio[index].select()
			},
			
			getWorkList(){
				uni.request({
					url: 'http://39.100.86.3:8098/system/dict/data/dictType', //接口地址。
					method: 'GET',
					data: {
						dictType: 'work_status'
					},
					header: {
						'X-Requested-With': 'XMLHttpRequest'
					},
					success: (res) => {
						console.log(res.data);
						let list = []
						this.selectList = []
						for (let i = 0; i <= res.data.length; i++) {
							if(res.data[i]){
								list.push({
									label: res.data[i].dictLabel,
									value: res.data[i].dictValue
								}, )
								this.selectList = list
							}
							
						}
					}
				});
			},
			getaddrCounty(code) {
				uni.request({
					url: 'http://39.100.86.3:8099/system/enterprise/area/code', //接口地址。
					method: 'GET',
					data: {
						parentCode: code
					},
					header: {
						'X-Requested-With': 'XMLHttpRequest'
					},
					success: (res) => {
						console.log(res.data);
						let list = []
						this.contry1Lists = []
						for (let i = 0; i <= res.data.length; i++) {
							if(res.data[i]){
								list.push({
									label: res.data[i].name,
									value: res.data[i].code
								}, )
								this.contry1Lists = list
							}
							
						}

					}
				});
			},
			getaddrTown(code) {
				uni.request({
					url: 'http://39.100.86.3:8099/system/enterprise/area/code', //接口地址。
					method: 'GET',
					data: {
						parentCode: code
					},
					header: {
						'X-Requested-With': 'XMLHttpRequest'
					},
					success: (res) => {
						console.log(res.data);
						let list = []
						this.contry2Lists = []
						for (let i = 0; i <= res.data.length; i++) {
							if(res.data[i]){
								list.push({
									label: res.data[i].name,
									value: res.data[i].code
								}, )
								this.contry2Lists = list
							}
							
						}

					}
				});
			},
			getaddrVillage(code) {
				uni.request({
					url: 'http://39.100.86.3:8099/system/enterprise/area/code', //接口地址。
					method: 'GET',
					data: {
						parentCode: code
					},
					header: {
						'X-Requested-With': 'XMLHttpRequest'
					},
					success: (res) => {
						console.log(res.data);
						let list = []
						this.contry3Lists = []
						for (let i = 0; i <= res.data.length; i++) {
							//console.log(res.data[i])
							if(res.data[i]){
								list.push({
									label: res.data[i].name,
									value: res.data[i].code
								}, )
								this.contry3Lists = list
							}
						}

					}
				});
			},
			cancel() {
				console.log("65656")
				/* uni.showToast({title:'取消',icon:'none'}) */
			},
			formSubmits(value){
				console.log(value)
				console.log(this.form)
				uni.request({
					url: 'http://39.100.86.3:8098/system/edit/person ', //接口地址。
					method: 'POST',
					data: {
						id:this.form.id,
						enterpriseName:this.form.enterpriseName,/* 企业（单位）名称 */
						name:this.form.name,/* 姓名 */
						age:this.form.age,/* 年龄 */
						sex:this.form.sex,/* 性别 */
						phone:this.form.phone,/* 电话 */
						addrCounty:this.form.addrCounty,
						addrCountyName:this.form.addrCountyName,
						addrTownName:this.form.addrTownName,
						addrVillageName:this.form.addrVillageName,
						addrTown:this.form.addrTown,
						addrVillage:this.form.addrVillage,
						workStatus:this.form.workStatus,/* 状态 */
						workStatusName:this.form.workStatusName,
						addrDetail:this.form.addrDetail,/* 详细地址 */
						team:this.form.team,/* 班组 */
						liveHbFlag:this.form.liveHbFlag,/* 是否有重点疫区旅居史 */
						otherCityFlag:this.form.otherCityFlag,/* 是否从怀化以外地区回来 */
						patienContactFlag:this.form.patienContactFlag,/* 是否与确诊、疑似病人密切接触 */
						createUser:this.form.id,
						updateUser:this.form.id,
			
					},
					header: {
					 'X-Requested-With': 'XMLHttpRequest',
					        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' 
					},
					success: (res) => {
						console.log(res.data);
				this.modalName = value;
					}
				});
				
			},
			submit(value) {
				this.modalName = value;
				console.log(this.form)
				uni.switchTab({
					url: '../personal/index'
				})
			},
			toggleTab(str) {
				this.$refs[str].show();
			},

			workStatusConfirm(val) {
				console.log(val);
				//如果页面需要调用多个mode类型，可以根据mode处理结果渲染到哪里;
				// switch(this.mode){
				// 	case "date":
				// 		break;
				// }
				this.form.workStatus = val.checkArr.value
				this.workName = val.result
			},
			addrCountyConfirm(val) {
				console.log(val);
				this.form.addrCounty =val.checkArr.value
				this.countyName = val.result
				this.getaddrTown(val.checkArr.value)
				this.contry2Lists = []
				this.form.addrTown = ""
				this.townName=""
				this.contry3Lists = []
				this.form.addrVillage = ""
				this.villageName=""
			},
			addrTownConfirm(val) {
				console.log(val);
				this.form.addrTown = val.checkArr.value
				this.townName = val.result
				this.getaddrVillage(val.checkArr.value)
				this.contry3Lists = []
				this.form.addrVillage = ""
				this.villageName=""
			},
			addrVillageConfirm(val) {
				console.log(val);
				this.villageName = val.result
				this.form.addrVillage = val.checkArr.value
			},
			formSubmit(e) {
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				var formdata = e.detail.value
				/*  uni.showModal({
				      content: '表单数据内容：' + JSON.stringify(formdata),
				      showCancel: false
				  }); */
			},
			formReset(e) {
				console.log('清空数据')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cu-modal{
		.cu-dialog{
			width: 432upx;
			height: 545upx;
			// padding: 20upx;
			background: url(../../static/login/model.png) no-repeat;
			background-size:100%;
			border-radius: 10px;
			.cu-dialog-top{
				padding-top: 48upx;
				.gogogo{
					font-family: SourceHanSansCN-Medium;
					font-size: 24upx;
					font-weight: normal;
					font-stretch: normal;
					// line-height: 30upx;
					letter-spacing: 0px;
					color: #fffefe;
					text-align: center;
				}
				.gogogo:nth-child(1){
					font-size: 40upx;
				}
			}
			.cu-dialog-center{
				padding: 20upx 36upx;
				.dialog-center-msg{
					width: 365upx;
					height: 238upx;
					background-color: #ffffff;
					border-radius: 10px;
					
				}
			}
			.cu-dialog-bottom{
				padding: 10upx 20upx;
				.buttom-btn{
					width: 362upx;
					height: 56upx;
					background-color: #7383ef;
					box-shadow: 0px 7upx 7upx 0px rgba(68, 68, 68, 0.16);
					border-radius: 28upx;
					line-height: 56upx;
					color:#FFFFFF;
				}
			}
		}
	} 
	.uni-btn-v{margin-top: 40rpx;}
	.evan-radio-show {
		padding: 23.52rpx;

		&__title {
			padding: 15rpx 0;

			&__item {
				font-size: 18.82rpx;
				color: #333;
				font-weight: bold;
			}
		}

		&__group-item {
			margin-bottom: 11.76rpx;
		}

		&__list-item {
			display: flex;
			align-items: center;
			height: 70rpx;
			padding-left: 25rpx;
			border-bottom: 1px solid #eee;

			&__label {
				font-size: 30.58rpx;
				color: #333;
				flex: 1;
				margin-right: 7.05rpx;
			}
		}
	}

	.heightbox {
		width: 100%;
		height: 105.88rpx;
		background: #5064eb;
	}

	.info_box {
		margin-top: -100rpx;
		padding: 0 23.52rpx 23.52rpx 23.52rpx;
	}

	.form-box {
		padding: 22rpx;
		position: relative;
		background: white;
		box-shadow: 0px 0px 30rpx 0px rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;
		z-index: 1;
	}

	.sub_one {
		margin-top: 23.52rpx;
		background-color: #5064eb;
		color: #fff;
	}

	.sub_button {
		background: #5064eb;
		font-size: 30.58rpx;
		width: 80%;
		margin-right: 10%;
		height: 70rpx;
		line-height: 70rpx;
		margin-bottom: 11.76rpx;
	}

	.b_title {
		margin-left: 60rpx;
	}

	.bottom-titile {
		margin-bottom: 23.52rpx;
		color: #EC4D4D;
		font-weight: bold;
		margin-top: 23.52rpx;
		font-size: 32.94rpx;
	}

	.icon {
		margin-top: -50rpx;
		position: absolute;
		right: 50rpx;
	}


	.form-title {
		font-size: 30.58rpx;
		padding-left: 5px;
		font-weight: bold;
	}

	.radio-title,
	.form_content {
		font-size: 30.58rpx;
	}

	.uni-input {
		height: 75rpx;
		background: white;
		border: 1px solid #eeeeee;
		border-top: none;
		border-left: none;
		border-right: none;
		border-radius: 10rpx;
		line-height: 75rpx;
		padding: 0 24rpx;
		font-size: 30.58rpx;
	}

	.info_head {
		color: red;
		text-align: center;
		font-weight: bold;
		margin-top: 15rpx;
		font-size: 32.94rpx;
		margin-bottom: 40rpx;
	}

	/* .uni-form-item .title {
        padding: 20rpx 0;
    } */
	.uni-column {
		margin-bottom: 30rpx;
	}

	.form-radio {
		margin-right: 58.82rpx;
	}

	.radios {
		transform: scale(0.7);
		margin-top: -5rpx;
	}

	uni-radio .uni-radio-input {
		margin: 0;
		margin-top: -5px;
	}
</style>
